.flex__box {
  display: flex;
}
.flex--row{
  flex-direction: row;
}
.flex--column{
  flex-direction: column;
}
/* 水平方向 */

.flex__box--left {
  display: flex;
  justify-content: flex-start;
}
.flex--left {
  justify-content: flex-start;
}

.flex__box--center {
  display: flex;
  justify-content: center;
}

.flex--center {
  justify-content: center;
}
.flex__box--right {
  display: flex;
  justify-content: flex-end;
}
.flex--right {
  justify-content: flex-end;
}
/* 多个横向一行均布 */

.flex__box--leftRight {
  display: flex;
  justify-content: space-between;
}

/* 多行显示 */

.flex__box--moreLine {
  display: flex;
  flex-wrap: wrap;
}

/* 垂直方向 */

.flex__box--top {
  display: flex;
  align-items: flex-start;
}

.flex--top {
  align-items: flex-start;
}

.flex__box--middle {
  display: flex;
  align-items: center;
}

.flex--middle {
  align-items: center;
}

.flex__box--bottom {
  display: flex;
  align-items: flex-end;
}

.flex--bottom {
  align-items: flex-end;
}

/* 垂直方向 顶部和底部对齐 */
.flex__box--topBottom {
  display: flex;
  align-content: space-between;
}
.flex--topBottom {
  align-content: space-between;
}
/* 两个方向居中 */
.flex__box--middleCenter,.flex__box--centerMiddle,.flex__box--mc,.flex__box--cm {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex--middleCenter,.flex--centerMiddle {
  align-items: center;
  justify-content: center;
}
